<template>
  <div class="page">
    <div class="page-footer">
      <van-dialog
        v-model:show="show"
        :show-confirm-button='false'
        close-on-click-overlay
        class="padding-tb-xl"
      >
        <van-form @submit="onSubmit">
          <van-field
            class="font-18"
            ref="username"
            v-model="state.userName"
            name="姓名"
            label="姓名"
            placeholder="你的姓名"
            label-width='20%'
            colon
            :rules="[{ required: true, message: '你的姓名' }]"
          />
          <van-field
            class="font-18"
            v-model="state.blessing"
            name="祝福语"
            label="祝福语"
            placeholder="你的祝福"
            label-width='20%'
            colon
            :rules="[{ required: true, message: '你的祝福' }]"
          />
          <div style="margin: 16px;">
            <van-button
              round
              block
              color='pink'
              class="font-18"
              native-type="submit"
            >
              提交
            </van-button>
          </div>
        </van-form>
      </van-dialog>
      <!-- <BlessingRoll />00 -->
      <Roll />
      <div class="margin-lf">
        <van-field
          disabled
          class="page-footer-field "
          placeholder="留下你的祝福..."
          @click="goBlessing"
        />
      </div>
      <img
        class="page-footer-flower4"
        src="../assets/imgs/flower4.png"
        alt=""
      >
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import BlessingRoll from "./BlessingRoll";
import Roll from './Roll'
export default {
  name: "f",
  components: {
    BlessingRoll,
    Roll
  },
  setup(props, cxt) {
    const show = ref(false);
    const state = reactive({
      userName: "",
      blessing: "",
    });
    const username = ref(null);
    const goBlessing = () => {
      show.value = true;
      setTimeout(() => {
        username.value.focus();
      }, 100);
    };
    const onSubmit = () => {
      console.log(state);
    };
    return {
      show,
      state,
      username,
      goBlessing,
      onSubmit,
    };
  },
};
</script>

<style scoped lang='scss'>
.page {
  &-footer {
    &-field {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #333;
      border-radius: 20px;
      width: 96%;
      padding: 5px 8px;
      opacity: 0.5;
      z-index: 999;
      animation: fieldFly 2s ease-in-out alternate both;
    }
    &-flower4 {
      position: absolute;
      bottom: 0;
      animation: flower4Fly 2s ease-in-out alternate both;
    }
  }
}
@keyframes fieldFly {
  0% {
    opacity: 0;
    bottom: 5%;
  }
  100% {
    bottom: 1;
  }
}
@keyframes flower4Fly {
  0% {
    bottom: -10%;
    opacity: 0;
  }
  100% {
    bottom: 1;
  }
}
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}
</style>